<template>
    <div class="template-detail">
        <el-page-header @back="goBack" :title="template.title">
            <template #content>
                <div class="page-header-content">
                    <span class="title">{{ template.title }}</span>
                    <el-tag v-for="tag in template.tags" :key="tag" size="small" class="ml-2">
                        {{ tag }}
                    </el-tag>
                </div>
            </template>
        </el-page-header>

        <div class="preview-section">
            <el-image :src="template.image" fit="cover" class="preview-image" />
            <div class="preview-info">
                <p class="description">{{ template.description }}</p>
                <div class="author-info">
                    <el-avatar :size="32" src="/avatar.jpg" />
                    <span>{{ template.author }}</span>
                </div>
                <div class="actions">
                    <el-button type="primary" size="large" @click="handleGenerate">立即生成</el-button>
                    <el-button size="large" @click="handleEdit">编辑工作流</el-button>
                </div>
            </div>
        </div>

        <div class="params-section">
            <h3>模板参数</h3>
            <div class="params-form">
                <el-form :model="params" label-width="100px">
                    <el-form-item label="提示词">
                        <el-input v-model="params.prompt" type="textarea" rows="3" />
                    </el-form-item>
                    <el-form-item label="反向提示词">
                        <el-input v-model="params.negativePrompt" type="textarea" rows="2" />
                    </el-form-item>
                    <el-form-item label="尺寸">
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-input-number v-model="params.width" :min="512" :max="2048" :step="64" />
                            </el-col>
                            <el-col :span="12">
                                <el-input-number v-model="params.height" :min="512" :max="2048" :step="64" />
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="采样器">
                        <el-select v-model="params.sampler">
                            <el-option label="Euler a" value="euler_a" />
                            <el-option label="DPM++ 2M Karras" value="dpm++_2m_karras" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="采样步数">
                        <el-slider v-model="params.steps" :min="20" :max="50" :step="1" show-input />
                    </el-form-item>
                    <el-form-item label="CFG Scale">
                        <el-slider v-model="params.cfg" :min="1" :max="20" :step="0.5" show-input />
                    </el-form-item>
                </el-form>
            </div>
        </div>

        <div class="examples-section">
            <h3>示例作品</h3>
            <div class="examples-grid">
                <el-image 
                    v-for="(example, index) in template.examples" 
                    :key="index"
                    :src="example"
                    fit="cover"
                    class="example-image"
                />
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 模拟模板数据
const template = {
    id: 1,
    title: '最新版魔法Flux',
    description: '科技感魔法风格，适合创作未来科幻场景。这个模板使用了最新的Flux模型，可以生成高质量的科幻风格图像。',
    image: '/images/flux1.jpg',
    tags: ['Flux', '科幻', '魔法'],
    author: '可爱的管理员',
    examples: [
        '/images/example1.jpg',
        '/images/example2.jpg',
        '/images/example3.jpg',
        '/images/example4.jpg'
    ]
}

// 参数表单数据
const params = ref({
    prompt: 'magic flux style, sci-fi scene, futuristic, detailed, high quality',
    negativePrompt: 'low quality, bad anatomy, worst quality',
    width: 512,
    height: 768,
    sampler: 'euler_a',
    steps: 30,
    cfg: 7
})

const handleGenerate = () => {
    router.push({
        name: 'generator',
        query: {
            template: template.id,
            ...params.value
        }
    })
}

const handleEdit = () => {
    router.push({
        name: 'editor',
        query: { template: template.id }
    })
}

const goBack = () => {
    router.back()
}
</script>

<style scoped>
.page-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.page-header-content .title {
    font-size: 18px;
    font-weight: bold;
}

.template-detail {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

.preview-section {
    display: flex;
    gap: 40px;
    margin-bottom: 40px;
}

.preview-image {
    width: 512px;
    height: 512px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.preview-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

.author-info {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #666;
}

.actions {
    margin-top: auto;
    display: flex;
    gap: 12px;
}

.params-section {
    margin-bottom: 40px;
}

.params-form {
    background: #f5f7fa;
    padding: 24px;
    border-radius: 8px;
}

.examples-section h3 {
    margin-bottom: 20px;
}

.examples-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}

.example-image {
    width: 100%;
    height: 280px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
</style> 